bubbleのページSlugを使ってみるよ
Slugとは、データタイプないに保存されたThingに割り当ててURLとして機能する組み込みのデータフィールドです。
実際のデータタイプを確認してみると、
SlugというフィールドがBuilt in fieldとして存在しています。
ここに値が入っていればSlugの機能を使うことができますが、どういったときに使えるのでしょうか?
Bubbleアプリで前のページから渡された情報をうけとって表示するページを作りたい場合、
ページ設定のType of content
という設定を使ってデータを受け取ることができます。
具体的な例だと、ユーザーや組織一覧ページから、選択したユーザーや組織の詳細ページを表示させるときなどに使えます。
このような遷移をするときに、BubbleのURLは
パスに長い文字列がつきます。この文字列はフィールドのunique id
です。
Slugを使うとこのunique idを任意の文字列に変えてURLを作ることができます。
こんな感じに。
Slugを設定してみる
アプリのDataページにあるApp data
から直接設定するか、workflowで設定することができます。
App dataから直接設定
App dataのページから対象のThingを選択して追加できます。
なお、Slugには 小文字、数字、-
のみを使用でき、250文字未満
である必要があります とドキュメントには書かれています。
が、日本語を登録できました。URLも登録した値になっています。
Slugs support all languages. If you notice any language that isn't supported or being incorrectly processed, please contact support@bubble.io
ドキュメントに上記のルールが書かれていたのですが、これに該当しているのかもしれません。
workflowから設定
Actionの追加のData(Things)
の中にあるSet a things slug
で設定できます。
Things to change
でSlugを設定するとき条件を追加し、
Slug
の箇所で動的に設定することができます。
※ 画像はランダム文字列を登録する時の設定です
Slugの条件式
Slugの追加だけでなく、有効なSlug値であるかどうかのテストをすることも可能です。
Can Have The Slug Value
- この操作は、引数がシングの有効なスラッグ値であるかどうかをテストします。有効なスラッグ値は、ユニークであり、小文字、数字、ハイフンのみで正しくフォーマットされています
Cannot Have The Slug Value
- この操作は、引数がThingの無効なスラッグ値であるかどうかをテストします。無効なスラッグ値とは、小文字、数字、ハイフンのみで構成されていないものや、ユニークではないものを指します
Slugの値を入力して登録するケースだと、
入力値がすでに登録されているSlugかどうかを確認できますね。
最後に
Slugを使用することでリソースを表示させるためのURLに意味を持たせることが可能になります。
unique idではちょっとなーと思ったら設定してみましょう。